<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#canvas{
				display: block;
				margin: 0 auto;
				box-shadow: 0 0 10px rgba(0,0,0,0.5);
			}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<script src="../libs/utils.js"></script>
		<script src="../components/ball.js"></script>
		<script type="text/javascript">
			var canvas = document.querySelector('#canvas')
			var ctx = canvas.getContext('2d');
			
			var w = canvas.width = 500;
			var h = canvas.height = 300
			
			var xa = 0,ya=0,a=0.1,r=10;
			var angle = $C.toRad(30)
			var ball = new Ball({x:r,y:r,r:r}).render(ctx);
			
			(function move(){
				window.requestAnimationFrame(move)
				ctx.clearRect(0,0,w,h);
				// 获取x轴得位置
				var dx = Math.cos(angle) * a;
				// 获取y轴得位置
				var dy = Math.sin(angle) * a;
				// 小球的x坐标 += x轴的速度
				ball.x += xa;
				// 小球的y坐标 += y轴的速度
				ball.y += ya;
				ball.render(ctx)
				// x，y轴的速度
				xa+=dx;
				ya+=dy;
			})()
			
		</script>
	</body>
</html>
